<template>
	<view>
		<view class="bounce bounce1"></view>
		<view class="bounce bounce2"></view>
		<view class="bounce bounce3"></view>
		<view class="bounce bounce4"></view>
	</view>	
</template>

<script>
</script>

<style lang="scss" scoped>
	
	.bounce {
		width: 24upx;
		height: 24upx;
		background-color: $bg-color;
		border-radius: 50%;
		animation: loading 1.2s both infinite;
	    display: inline-block;/* 设置小球的布局 */
	}
	
	/* 设置延迟 */
	.bounce1 {
	    animation-delay: -0.32s;
	}
	
	.bounce2 {
	    animation-delay: -0.16s;
	}
	
	.bounce3 {
	    animation-delay: 0s;
	}
	.bounce4 {
	    animation-delay: 0.16s;
	}
	@keyframes loading {
	    0% {
	        transform: scale(0);
	    }
	
	    40% {
	        transform: scale(1);
	    }
	
	    80% {
	        transform: scale(0);
	    }
	
	    100% {
	        transform: scale(0);
	    }
	}
</style>
